$lineblue:rgb(19, 107, 179);
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
}

body {
    padding: .4375rem .875rem 80px;
    width: 100%;
    position: relative;
    background: url("../images/2.jpg") no-repeat;
    background-size: 100%;
    background-position: left top;
    &::before {
        width: 100%;
        height: 100%;
        content: "";
        overflow: hidden;
        background: url("../images/3.png") no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        background-size: 100%;
        background-position: left top;
        z-index: -1;
    }
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        >div {
            display: flex;
            align-items: center;
            justify-content: center;
            p {
                color: rgba(79, 189, 251, 1);
                font-size: .3rem;
            }
            span {
                color: #fff;
                font-size: .3rem;
            }
        }
        h2 {
            margin-right: 3rem;
            color: #fff;
            opacity: 0.8;
            letter-spacing: 0.1rem;
            font-size: .5rem;
        }
        >p {
            font-size: .3rem;
            color: #fff;
        }
    }
    main {
        margin-top: .5rem;
        .top {
            position: relative;
            .first-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    width: .75rem;
                    height: .05rem;
                    background-color: rgb(255, 212, 97);
                }
            }
            .second-line {
                margin-bottom: .025rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    width: 2.25rem;
                    height: .05rem;
                    background-color: rgb(79, 189, 251);
                }
            }
            .third-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    width: 5.375rem;
                    height: .05rem;
                    background-color: rgb(19, 107, 179);
                }
            }
            .forth-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span:nth-child(1) {
                    box-sizing: content-box;
                    width: .2rem;
                    height: .03rem;
                    margin: 0.0125rem;
                    margin-left: 5.35rem;
                    padding-bottom: .025rem;
                    border-bottom: .025rem solid rgb(19, 107, 179);
                    background-clip: content-box;
                    background-color: rgb(19, 107, 179);
                    transform: rotate(45deg);
                }
                span:nth-child(2) {
                    box-sizing: content-box;
                    width: .2rem;
                    height: .03rem;
                    margin: .0125rem;
                    margin-right: 5.35rem;
                    padding-bottom: .025rem;
                    border-bottom: .025rem solid $lineblue;
                    background-clip: content-box;
                    background-color: rgb(19, 107, 179);
                    transform: rotate(-45deg);
                }
            }
            .fifth-line {
                margin: 0 5.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                top: -0.3rem;
                h5 {
                    color: #fff;
                    font-size: 0.3rem;
                    white-space: nowrap;
                }
                >div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    i {
                        font-size: 0.75rem;
                        color: rgb( 1, 239, 151);
                    }
                    i:nth-child(2) {
                        transform: translate(-0.2rem, 0rem) scale(0.4);
                    }
                    i:nth-child(1) {
                        transform: translate(0.2rem, 0rem) scale(0.4);
                    }
                    >div {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        justify-content: center;
                        >span {
                            width: 3.375rem;
                            height: .05rem;
                            background-color: $lineblue;
                        }
                        >div {
                            width: 100%;
                            margin-top: .05rem;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            span {
                                width: .75rem;
                                height: .05rem;
                                background-color: $lineblue;
                            }
                            p {
                                width: 0.375rem;
                                height: 0.05rem;
                                background-color: $lineblue;
                            }
                        }
                    }
                }
            }
        }
    }
    section {
        display: flex;
        align-items: center;
        justify-content: center;
        .first-content {
            margin: 0.125rem;
            width: 5.75rem;
            height: 10.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: .05rem solid rgb(15, 155, 253);
            border-radius: 0.1rem;
            box-shadow: 0 0.375rem 0.5rem rgba($color: #fff, $alpha: 0.2) inset, 0 0 #fff inset, 0 -0.375rem 0.5rem rgba($color: #fff, $alpha: 0.2) inset, 0 0 #fff inset;
            #first-echarts {
                width: 5.5rem;
                height: 5rem;
            }
            #second-echarts {
                width: 5.5rem;
                height: 5rem;
            }
        }
        .second-content {
            margin: 0.125rem;
            width: 10.25rem;
            height: 10.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            >div:nth-child(1) {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: start;
                h3 {
                    font-size: .45rem;
                    color: rgb(50, 125, 200);
                    margin: 0.25rem;
                }
                div {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    button {
                        background-color: rgb(64, 163, 233);
                        width: .9rem;
                        height: .9rem;
                        font-size: 0.5rem;
                        margin: 0.1rem;
                        cursor: pointer;
                        color: #fff;
                        outline: none;
                        border: 0px;
                        border-radius: 0.1rem;
                        &:hover {
                            box-shadow: 0 0 10px #fff;
                        }
                    }
                }
            }
            >div:nth-child(2) {
                width: 10.25rem;
                height: 5.875rem;
                border: .05rem solid rgb(15, 155, 253);
                border-radius: 0.1rem;
                box-shadow: 0 0.375rem 0.5rem rgba($color: #fff, $alpha: 0.2) inset, 0 0 #fff inset, 0 -0.375rem 0.5rem rgba($color: #fff, $alpha: 0.2) inset, 0 0 #fff inset;
            }
            #third-echarts {
                margin: .125rem;
                width: 10rem;
                height: 5.5rem;
            }
        }
        .third-content {
            margin: 0.125rem;
            width: 5.75rem;
            height: 10.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: .05rem solid rgb(15, 155, 253);
            border-radius: 0.1rem;
            box-shadow: 0 0.375rem 0.5rem rgba($color: #fff, $alpha: 0.2) inset, 0 0 #fff inset, 0 -0.375rem 0.5rem rgba($color: #fff, $alpha: 0.2) inset, 0 0 #fff inset;
            #forth-echarts {
                width: 5.5rem;
                height: 5rem;
            }
            table {
                width: 4.8rem;
                height: 3.2rem;
                border-collapse: collapse;
                border-top-left-radius: 0.3rem;
                border-top-right-radius: 0.3rem;
                margin: 0.3rem 0 1rem;
                overflow: hidden;
                thead {
                    tr {
                        height: 0.6rem;
                        background-color: rgba($color: #fff, $alpha: 0.15);
                        th {
                            font-size: 0.25rem;
                            color: rgb(19, 107, 179);
                        }
                    }
                }
                tbody {
                    tr {
                        height: 0.4rem;
                        td:nth-child(2) {
                            width: 1rem;
                        }
                        // td:nth-child(4) {
                        //     width: 0.6rem;
                        // }
                        td {
                            color: rgb(27, 164, 198);
                            text-align: center;
                            font-size: 0.25rem;
                            input {
                                text-align: center;
                                width: 100%;
                                height: 60%;
                                border: 0px;
                                border-bottom: 1px solid rgba($color: #fff, $alpha: 0.4);
                                font-size: 0.2rem;
                                color: #65c294;
                                background-color: transparent;
                                outline: none;
                            }
                            button {
                                width: 100%;
                                height: 100%;
                                font-size: 0.25rem;
                                background-color: transparent;
                                outline: none;
                                color: rgba($color: #9b95c9, $alpha: 1.0);
                                border: 0px;
                                cursor: pointer;
                                &:hover {
                                    background-color: rgba($color: #fff, $alpha: 0.2);
                                }
                            }
                        }
                    }
                    tr:nth-child(2n) {
                        background-color: rgba($color: #fff, $alpha: 0.05);
                    }
                }
            }
        }
    }
}